<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>控制目标</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/computingEquipment.css"/>
	</head>
	<body>
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a class="active">项目圈</a>
					</li>
					<li>
						<a>材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe643;</span>
						<span class="infoCenterText">消息中心</span>
						<span class="remindCircle"></span>
					</a>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
		
		<!--内容 start-->
		<div class="computedContent">
			<!--项目圈内容 start-->
			<div class="controlAim">
				<div class="projectBox wayDesign1StepStatusBox">
					<div class="stepStatus">
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum"><i class="el-icon-check"></i></div>
								<div class="stepName">建筑信息</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine hidden"></div>
								<div class="finishLine "></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum">2</div>
								<div class="stepName">控制目标</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine "></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">3</div>
								<div class="stepName">源头设置</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">4</div>
								<div class="stepName">时间设置</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">5</div>
								<div class="stepName">通风设置</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">6</div>
								<div class="stepName">计算结果</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
				
				<div class="projectBox">
					<div class="selectBtnBox">
						<div class="selectBtnGroup">
							<label>浓度限值</label>
							<div class="selectBtns">
								<a class="whiteSelectBrn oneSelect">1级</a>
								<a class="whiteSelectBrn oneSelect">2级</a>
								<a class="greenSelectBtn oneSelect">3级</a>
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="selectBtnGroup">
							<label>温度影响</label>
							<div class="selectBtns">
								<a class="greenSelectBtn oneSelect">恒定</a>
								<a class="whiteSelectBrn oneSelect">非恒定</a>
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="selectBtnGroup">
							<label>污染类别</label>
							<div class="selectBtns">
								<a class="whiteSelectBrn chemistryPollution muchSelect">化学污染</a>
								<a class="whiteSelectBrn grainPollution muchSelect">颗粒物污染</a>
								<a class="whiteSelectBrn muchSelect carbonDioxide">二氧化碳</a>
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="selectBtnGroup chemistryParameter hidden">
							<label>化学参数</label>
							<div class="selectBtns">
								<a class="whiteSelectBrn muchSelect selectList">甲醛</a>
								<a class="whiteSelectBrn muchSelect selectList">TVOC</a>
								<a class="whiteSelectBrn muchSelect selectList">苯</a>
								<a class="whiteSelectBrn muchSelect selectList">甲苯</a>
								<a class="whiteSelectBrn muchSelect selectList">二甲苯</a>
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="selectBtnGroup grainParameter hidden">
							<label>颗粒选择</label>
							<div class="selectBtns">
								<a class="whiteSelectBrn muchSelect selectList">PM10</a>
								<a class="whiteSelectBrn muchSelect selectList">PM2.5</a>
								<div class="clear"></div>
							</div>
							<div class="clear"></div>
						</div>
					</div>
					<ul class="form">
						<li class="littleform">
							<div class="title">污染物</div>
							<div class="littleTitle">
								<div class="littleTitleText">项目</div>
								<div class="littleTitleText littleTitleLastText">单位</div>
								<div class="clear"></div>
							</div>
							<div class="formContent">
								<div class="formContentText">甲醛</div>
								<div class="formContentText formContentLastText">mg/m³</div>
								<div class="clear"></div>
							</div>
							<div class="formContent">
								<div class="formContentText">TVOC</div>
								<div class="formContentText formContentLastText">mg/m³</div>
								<div class="clear"></div>
							</div>
							<div class="formContent">
								<div class="formContentText">苯</div>
								<div class="formContentText formContentLastText">mg/m³</div>
								<div class="clear"></div>
							</div>
							<div class="formContent">
								<div class="formContentText">甲苯</div>
								<div class="formContentText formContentLastText">mg/m³</div>
								<div class="clear"></div>
							</div>
							<div class="formContent">
								<div class="formContentText">二甲苯</div>
								<div class="formContentText formContentLastText">mg/m³</div>
								<div class="clear"></div>
							</div>
							<div class="formContent">
								<div class="formContentText">PM 10</div>
								<div class="formContentText formContentLastText">mg/m³</div>
								<div class="clear"></div>
							</div>
							<div class="formContent">
								<div class="formContentText">PM 2.5</div>
								<div class="formContentText formContentLastText">mg/m³</div>
								<div class="clear"></div>
							</div>
							<div class="formContent">
								<div class="formContentText">CO2</div>
								<div class="formContentText formContentLastText">mg/m³</div>
								<div class="clear"></div>
							</div>
							<div class="formContent">
								<div class="formContentText">氧</div>
								<div class="formContentText formContentLastText">mg/m³</div>
								<div class="clear"></div>
							</div>
						</li>
						<li class="littleform littleLastform">
							<div class="title">限值水平</div>
							<div class="levelTitle">
								<div class="levelTitleText">Ⅲ级</div>
								<div class="levelTitleText">Ⅱ级</div>
								<div class="levelTitleText levelTitleLastText">Ⅰ级</div>
								<div class="clear"></div>
							</div>
							<div class="levelContent">
								<div class="levelContentText">0.3</div>
								<div class="levelContentText">0.1</div>
								<div class="levelContentText levelContentLastText">0.5</div>
								<div class="clear"></div>
							</div>
							<div class="levelContent">
								<div class="levelContentText">0.3</div>
								<div class="levelContentText">0.1</div>
								<div class="levelContentText levelContentLastText">0.5</div>
								<div class="clear"></div>
							</div>
							<div class="levelContent">
								<div class="levelContentText">0.3</div>
								<div class="levelContentText">0.1</div>
								<div class="levelContentText levelContentLastText">0.5</div>
								<div class="clear"></div>
							</div>
							<div class="levelContent">
								<div class="levelContentText">0.3</div>
								<div class="levelContentText">0.1</div>
								<div class="levelContentText levelContentLastText">0.5</div>
								<div class="clear"></div>
							</div>
							<div class="levelContent">
								<div class="levelContentText">0.3</div>
								<div class="levelContentText">0.1</div>
								<div class="levelContentText levelContentLastText">0.5</div>
								<div class="clear"></div>
							</div>
							<div class="levelContent">
								<div class="levelContentText">0.3</div>
								<div class="levelContentText">0.1</div>
								<div class="levelContentText levelContentLastText">0.5</div>
								<div class="clear"></div>
							</div>
							<div class="levelContent">
								<div class="levelContentText">0.3</div>
								<div class="levelContentText">0.1</div>
								<div class="levelContentText levelContentLastText">0.5</div>
								<div class="clear"></div>
							</div>
							<div class="levelContent">
								<div class="levelContentText">0.3</div>
								<div class="levelContentText">0.1</div>
								<div class="levelContentText levelContentLastText">0.5</div>
								<div class="clear"></div>
							</div>
							<div class="levelContent">
								<div class="levelContentText">0.3</div>
								<div class="levelContentText">0.1</div>
								<div class="levelContentText levelContentLastText">0.5</div>
								<div class="clear"></div>
							</div>
						</li>
						<li class="clear"></li>
						<li class="attention">注：表中Ⅲ级限值等同GB/T 18883</li>
					</ul>
					<div class="wid100 tac mb30">
						<button class="whiteLargerBtn mr10">返回修改</button>
						<button class="greenLargerBtn">下一步</button>
					</div>
				</div>
				
			</div>	
		</div>
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content最小高度
			var computedContentMinHeight = $(window).innerHeight() - 60;
			$('.computedContent').css('min-height',computedContentMinHeight + 'px');
			
			//单选控制
			$('.selectBtns .oneSelect').click(function(){
				$(this).parent().find('.oneSelect').removeClass('greenSelectBtn').addClass('whiteSelectBrn');
				$(this).removeClass('whiteSelectBrn').addClass('greenSelectBtn');
			});
			//多选控制
			$('.muchSelect').click(function(){
				if($(this).hasClass('greenSelectBtn')){
					$(this).removeClass('greenSelectBtn').addClass('whiteSelectBrn');
					if($('.chemistryPollution').hasClass('whiteSelectBrn')){
						$('.chemistryParameter').addClass('hidden').find('.muchSelect').removeClass('greenSelectBtn').addClass('whiteSelectBrn');
						for(var i = 0; i < 5; i++){
							$('.formContent').eq(i).removeClass('formContentActive');
							$('.levelContent').eq(i).removeClass('formContentActive');
						}
					}
					if($('.grainPollution').hasClass('whiteSelectBrn')){
						$('.grainParameter').addClass('hidden').find('.muchSelect').removeClass('greenSelectBtn').addClass('whiteSelectBrn');
						for(var i = 5; i < 7; i++){
							$('.formContent').eq(i).removeClass('formContentActive');
							$('.levelContent').eq(i).removeClass('formContentActive');
						}
					}
				}else{
					$(this).removeClass('whiteSelectBrn').addClass('greenSelectBtn');
					if($('.chemistryPollution').hasClass('greenSelectBtn')){
						$('.chemistryParameter').removeClass('hidden');
					}
					if($('.grainPollution').hasClass('greenSelectBtn')){
						$('.grainParameter').removeClass('hidden');
					}
				}
			});
			
			//判断多选选项选中之后下列的列表发生相应的变化
			$('.selectList').each(function(index){
				$(this).click(function(){
					if($(this).hasClass('greenSelectBtn')){
						$('.formContent').eq(index).addClass('formContentActive');
						$('.levelContent').eq(index).addClass('formContentActive');
					}else{
						$('.formContent').eq(index).removeClass('formContentActive');
						$('.levelContent').eq(index).removeClass('formContentActive');
					}
				});
			});
			
			//判断二氧化碳按钮
			$('.carbonDioxide').click(function(){
				if($(this).hasClass('greenSelectBtn')){
					$('.formContent').eq(7).addClass('formContentActive');
					$('.levelContent').eq(7).addClass('formContentActive');
				}else{
					$('.formContent').eq(7).removeClass('formContentActive');
					$('.levelContent').eq(7).removeClass('formContentActive');
				}
			});
			
		});
		
		
		
		new Vue({
			el:'.loginInfo'
		});
	</script>
</html>
